<template>
        <!-- 3/4赵亚华 -->
    <div>
        <div class="nav-s">
                <span @click="handleBack">
                    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3749881077,2775574849&fm=15&gp=0.jpg" alt="">
                </span>
                <span>购物车</span>
                <span v-show="ok" @click="handleShow()">编辑全部</span>
                <span v-show="!ok" @click="handleShow()">完成</span>
        </div>
        <div class="main">
            <div class="wrag" v-for="data in shoplist" :key="data.store_id">
                <div class="shop-group">
                    <div class="cart-shop-name">
                        <h4>{{data.store_name}}</h4>
                    </div>
                    <ul>
                        <li v-for="item in data.goods" :key="item.cart_id">

                            <input type="checkbox" @change="zongjia(item.goods_id)" v-model="selectlist" :value="item.goods_id">
                            <a href="#">
                                <img :src="item.goods_image" alt="">
                            </a>
                            <div class="it-cart-product">
                                <div class="sitem-txt">
                                    {{item.goods_name}}
                                </div>
                                <div class="sitem-price">
                                    <div class="price">
                                    <span>
                                        <i class="over">￥</i>
                                        <span class="over">{{item.goods_marketprice}}</span>
                                    </span>
                                    <span>
                                        <i class="color-red">￥</i>
                                        <span class="color-red">{{item.goods_price}}</span>
                                    </span>
                                    </div>
                                    <div class="right">
                                        <a href="#" @click="clickjian(item.goods_id)">-</a>
                                        <input type="text" :value="item.goods_num">
                                        <a href="#" @click="clickjia(item.goods_id)">+</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        //test
        <div class="shop-settlement">
           <div class="set-lwp">
               <div class="set-price" v-show="ok">
                   <div class="price-total">
                       <span>合计：</span>
                        <i class="red">￥</i>
                       <span class="red">{{allPrice}}</span>
                   </div>
                   <div class="set-freight">不含运费</div>
               </div>
           </div>
           <button @click="tese">修改test数据</button>
           <div class="set-rwp">
               <span v-show="ok" @click="handelsum()">去结算</span>
               <span v-show="!ok" @click="remove">删除</span>
               <span v-show="ok">({{selectlist.length}})</span>
           </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
export default {
  data () {
    return {
      sum: 0,
      selectlist: [],
      shoplist: '',
      ok: true,
      allPrice: '',
      shoparr: [],
      test:{
        a:1,
        b:2
      }
    }
  },
  watch:{
    test:{
      handler:function(nv,ov){
        console.log("被监听了");
        console.log(nv,ov);
        
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
    tese(){
      Vue.set(this.test,"b",5)
      console.log(this.test);
      
    },
    handleBack () { // nav 返回
      this.$router.back('/home')
    },
    handelsum () { // 去结算 order页面
      this.$router.push('/shopCar/order')
    },
    clickjian (id) { // 数量减
      // if(this.mytext === 1) return
      // this.mytext--

      for (let i = 0; i < this.shoparr.length; i++) {
        console.log(this.shoparr[i])

        if (id == this.shoparr[i].goods_id) {
          if (this.shoparr[i].goods_num == 1) {
            alert('数量最少为1')
          } else {
            this.shoparr[i].goods_num--
          }
        }
      }
      this.zongjia(id)
    },
    clickjia (id) { // 数量加
      // this.mytext++
      console.log(id)
      for (let i = 0; i < this.shoparr.length; i++) {
        console.log(this.shoparr[i])

        if (id == this.shoparr[i].goods_id) {
          this.shoparr[i].goods_num++
        }
      }
      this.zongjia(id)
    },
    handleShow () {
      this.ok = !this.ok
    },
    zongjia (id) { // 总价
      // let shoparr = this.shoplist.map(item =>{
      //     return item.goods[0]
      // })
      let price = 0
      for (let j = 0; j < this.selectlist.length; j++) {
        for (let i = 0; i < this.shoparr.length; i++) {
          if (this.selectlist[j] == this.shoparr[i].goods_id) {
            price += this.shoparr[i].goods_num * this.shoparr[i].goods_price
          }
        }
      }
      this.allPrice = price
    },
    remove () {
      // console.log(1111);
      // let arr = []
      for (let i = 0; i < this.selectlist.length; i++) {
        this.shoplist = this.shoplist.filter(item => {
          return this.selectlist[i] !== item.goods[0].goods_id
        })
        // this.selectlist = []
      }
      console.log(this.shoplist)

      this.selectlist = [],
      this.allPrice = ''

      // let price = 0
      // for(let j = 0;j<this.selectlist.length;j++){
      //     for(let i = 0;i<this.shoparr.length;i++){
      //         if(this.selectlist[j] == this.shoparr[i].goods_id){
      //             price += this.shoparr[i].goods_num * this.shoparr[i].goods_price
      //         }

      //     }
      // }
    }
  },
  mounted () {
    // 设置axios为form-data
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
    axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'
    axios.defaults.transformRequest = [function (data) {
      let ret = ''
      for (const it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }]
    // 然后再修改原型链
    Vue.prototype.$axios = axios
    axios.post('/lct?api_version=2.3.0&platType=2&client=wap&isEncry=0&time=1583401729504', {
      key: 'c067a5fa10e1f6238e369b21e54cea2d',
      act: 'mobile_cart',
      op: 'index'
    }).then(res => {
      this.shoplist = res.data.datas.cart
      console.log(this.shoplist)
      this.shoparr = this.shoplist.map(item => {
        return item.goods[0]
      })
    })
  },
  computed: {
    // shoparr(){
    //     return this.shoplist.map(item =>{
    //         return item.goods[0]
    //     })
    // }
  }
}
</script>
<style lang="scss">
    body{
        background: #f0f0f0;
    }
    .nav-s{
        height: 50px;
        display: flex;
        justify-content: space-around;
        border-bottom:1px solid #ccc;
        align-items: center;
        span{
             font-size: 16px;
             img{
                 width:18px;
                 height: 18px;
             }
        }

    }
    .main{
           overflow:hidden;
           height:520px;
           .wrag{
            //    height:520px;
            //    overflow-y:scroll
           }
    }
    .shop-group{
        background-color:#fff;
        padding:5px;
        .cart-shop-name{
            display: flex;
            align-items: center;
            margin:3px 0;
            input{
                outline: none;
                cursor: pointer;
                width:20px;
                height: 20px;
            }
            h4{
                margin-left:10px;
                font-size: 18px;
                font-weight: normal;
            }
        }
        ul{
            li{
                display: flex;
                align-items: center;
                margin-bottom:5px;
                background: #f7f7f7;
                input{
                    width:20px;
                    height: 20px;
                }
                a{
                    width:24%;
                    margin: 5px;
                    img{
                        width:100%;
                        height: 100%;
                    }
                }
                .it-cart-product{
                    width:67%;
                    height: 85px;
                    .sitem-txt{
                        font-size: 16px;
                        width:100%;
                    }
                    .sitem-price{
                        margin-top:8px;
                      .price{
                          float: left;
                          width: 100px;
                          height: 37px;
                           span{
                            font-size: 16px;
                            display: block;
                            display:flex;
                        }
                        .over{
                            text-decoration: line-through;
                            color: #808080;
                            margin-right: 2px;
                        }
                        .color-red{
                            color: red;
                            font-size: 18px;
                        }
                      }
                      .right{
                          width: 100px;
                          height: 30px;
                          float: right;
                          display:flex;
                          align-items: center;
                          background-color: #f0f0f0;
                          border-radius: 4px;
                          input{
                              width: 40px;
                              border: none;
                              height:100%;
                              text-align: center;
                              font-size: 16px;
                              background-color: #fff;
                          }
                          a{
                              background: #f7f7f7;
                              outline:none;
                              color: #ccc;
                          }
                      }

                    }
                }
            }
        }
    }
            .shop-settlement{
                width:100%;
                height:50px;
                bottom:50px;
                position:fixed;
                z-index:10;
                border-top:1px solid #ccc;
                border-bottom:1px solid #ccc;
                background-color: #fff;
                .set-lwp{
                    width:60%;
                    height:100%;
                    float:left;
                    display: flex;
                    justify-content:space-between;
                    .set-sel{
                        display: flex;
                        align-items: center;
                        float: left;
                        input{
                            width: 20px;
                            height:20px;
                            margin-left:5px;
                        }
                        span{
                            font-size: 16px;
                            margin-left:5px;

                        }
                    }
                    .set-price{
                        width: 200px;
                        padding-left: 20px;
                    .price-total{
                        width: 200px;
                        font-size: 25px;
                            span{
                                width: 20px;
                                font-size: 12px;
                            }
                            i{
                                width: 20px;
                            }
                            .red{
                                color: red;
                                font-size: 12px;
                            }
                        }
                    .set-freight{
                       font-size: 12px;
                       text-align:left;
                       color: #999;
                    }
                     }
                }
                .set-rwp{
                    width:35%;
                    height:100%;
                    line-height:100%;
                    text-align:center;
                    background-color: #fb0a84;
                    float: right;
                    span{
                        font-size: 16px;
                        color: #fff;
                        line-height:50px;
                    }
                }
            }
</style>
